<template>
  <div class="login">
    <div class="login-con">
      <Card class="login-card" icon="log-in" title="用户注册" :bordered="false">
        <div class="form-con">
          <!-- <login-form @on-success-valid="handleSubmit"></login-form> -->
          <Form
            @keyup.enter.native="confirm"
            ref="formInline"
            :model="formInline"
            :rules="ruleInline"
          >
            <FormItem prop="username">
              <i-input type="text" placeholder="请输入账号" v-model="formInline.username" clearable>
                <i class="iconfont icon-yonghu" slot="prepend"></i>
              </i-input>
            </FormItem>
            <FormItem prop="password">
              <i-input type="password" placeholder="请输入密码" v-model="formInline.password" clearable>
                <i class="iconfont icon-mima1" slot="prepend"></i>
              </i-input>
            </FormItem>
            <FormItem prop="confirmPassword">
              <i-input
                type="password"
                placeholder="请确认密码"
                v-model="formInline.confirmPassword"
                clearable
              >
                <i class="iconfont icon-mima1" slot="prepend"></i>
              </i-input>
            </FormItem>
            <FormItem>
              <Button type="info" long @click="confirm">确认</Button>
            </FormItem>
          </Form>
        </div>
      </Card>
    </div>
    <Alert
      :isAlertVisible="isAlertVisible"
      :alertMsg="alertMsg"
      @alertCancel="isAlertVisible = false"
      @alertConfirm="modified"
      :isLogin="true"
    ></Alert>
  </div>
</template>

<script>
import Alert from "../../components/Alert/Alert.vue";
import { reqRegister } from "../../api";

export default {
  components: {
    Alert
  },
  data() {
    return {
      formInline: {
        username: "",
        password: "",
        confirmPassword: ""
      },
      alertMsg: "",
      isAlertVisible: false,
      isSuccess: false,
      ruleInline: {
        username: [
          {
            required: true,
            message: "账号不能为空",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          }
        ],
        confirmPassword: [
          {
            required: true,
            message: "确认密码不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    confirm() {
      if (
        !this.formInline.username ||
        !this.formInline.password ||
        !this.formInline.confirmPassword
      ) {
        this.$Message.warning("请填写完整信息");
      } else if (this.formInline.password !== this.formInline.confirmPassword) {
        this.$Message.warning("两次输入密码不一致，请重新输入！");
      } else {
        // //进行后台验证，更新密码
        this.handleRegister();
        // let params = {
        //   username: this.formInline.username,
        //   password: this.formInline.password
        // };
        // console.log(params);
        // let result =  reqRegister(params);
        // console.log("result", result);
        // if (result.code === 6000) {
        //   this.isSuccess = true;
        //   this.alertMsg = "注册成功，请重新登录";
        //   this.isAlertVisible = true;
        // } else {
        //   this.isSuccess = false;
        //   this.alertMsg = "注册失败，请重新注册";
        //   this.isAlertVisible = true;
        // }
      }
    },
    async handleRegister() {
      //进行后台验证，更新密码
      let params = {
        username: this.formInline.username,
        password: this.formInline.password
      };
      console.log(params);
      let result = await reqRegister(params);
      console.log("result", result);
      if (result.code === 6000) {
        this.isSuccess = true;
        this.alertMsg = "注册成功，请重新登录";
        this.isAlertVisible = true;
      } else if (result.code === 9102) {
        this.isSuccess = false;
        this.alertMsg = "用户名不可用,请输入1~10位的任意字符串,不包括开头和结尾的空白字符";
        this.isAlertVisible = true;
      } else if (result.code === 9103) {
        this.isSuccess = false;
        this.alertMsg = "该用户已被注册";
        this.isAlertVisible = true;
      }else if (result.code === 9104) {
        this.isSuccess = false;
        this.alertMsg = "密码不可用，请输入6～20位的任意字符串";
        this.isAlertVisible = true;
      } else {
        this.isSuccess = false;
        this.alertMsg = "注册失败，请重新注册";
        this.isAlertVisible = true;
      }
    },
    modified() {
      if (this.isSuccess === true) {
        this.isAlertVisible = false;
        this.$router.replace({ name: "login" });
      } else {
        this.isAlertVisible = false;
        this.formInline.username = "";
        this.formInline.password = "";
        this.formInline.confirmPassword = "";
      }
    }
  }
};
</script>

<style lang="less">
</style>